<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      height="100px"
    >
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <img :src="banner.imageUrl" />
      </van-swipe-item>
    </van-swipe>
    <!-- 分类 -->
    <div class="classify">
      <div class="swiper-container">
        <van-swipe class="my-swipe" indicator-color="white">
          <van-swipe-item
            ><van-grid square>
              <van-grid-item
                v-for="value in 8"
                :key="value"
                icon="photo-o"
                text="文字"
              /> </van-grid
          ></van-swipe-item>
          <van-swipe-item>
            <van-grid square>
              <van-grid-item
                v-for="value in 8"
                :key="value"
                icon="photo-o"
                text="文字"
              />
            </van-grid>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="seckill">
      <div class="title">
        <h3>低价秒杀</h3>
        <span>查看更多</span>
      </div>
      <div class="hint">每天10点 限量秒杀</div>
    </div>
    <div class="tabs">
      <van-tabs v-model="active" swipeable>
        <van-tab v-for="index in 8" :title="'选项 ' + index" :key="index">
          内容 {{ index }}
          <div>123</div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import request from '../../utils/request'
import Swiper from 'swiper'
import 'swiper/swiper-bundle.min.css'

export default {
  name: 'Home',
  data() {
    return {
      banners: []
    }
  },
  created() {
    request({
      url: 'http://rap2api.taobao.org/app/mock/285789/api/banners'
    })
      .then((data) => {
        // 更新数据
        this.banners = data.banners
        console.log('数据：', this.banners)
        // 在下一次 DOM 更新结束后，执行回调函数
        this.$nextTick(() => {
          /* eslint-disable-next-line */
          new Swiper('.swiper-container', {
            direction: 'horizontal', // 横向切换选项
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              type: 'bullets',
              bulletActiveClass: 'my-bullet-active'
            }
          })
        })
      })
      .catch((err) => console.log('异常：', err))
  }
}
</script>

<style lang="less" scoped>
.home {
  // /deep/  .my-swipe {
  //   width: 400px;
  //   height: 180px;
  //   margin: 10px auto;
  //   img{
  //     width: 400px;
  //     height: 180px;
  //   }
  // }
  .classify {
    width: 360px;
    height: 200px;
    border-radius: 8px;
    margin: 0 auto;
    .swiper-wrapper {
      width: 720px;
      overflow-x: hidden;
      .van-swipe__indicators{
        background: yellowgreen;
        bottom: 5px;
      }
    }
  }
  .seckill {
    width: 360px;
    min-height: 100px;
    margin: 10px auto;
    border: 1px solid;
    border-radius: 6px;
  }
  .tabs {
    min-height: 400px;
    border-radius: 6px;
    background: #e9dfd3;
    /deep/ .van-tabs {
      width: 400px;
      margin: 0 auto;
      &__nav {
        background: #e9dfd3;
      }
    }
  }
}
</style>
